<template>
	<cl-page background-color="transparent" :fullscreen="true" :statusBar="false">
		<view class="page-login animate__animated animate__fadeIn">
			<cl-banner
				:list="bannerList"
				radius="0"
				height="100vh"
				:indicatorDots="true"
			></cl-banner>
			<image src="/static/logo.png" mode="aspectFill" class="logo"></image>
			<view class="text">{{ $t("login.text") }}</view>
			<button class="register" @click="router.push('/pages/login/register')">
				{{ $t("login.register") }}
			</button>
			<button class="login" @click="router.push('/pages/login/login')">
				{{ $t("login.login") }}
			</button>
			<view class="later" @click="router.home()"> {{ $t("login.later") }}</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import img from "@/static/images/loginBg.png";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { user } = useStore();
const app = useApp();
const ui = useUi();
const bannerList = ref([{ url: img }, { url: img }]);
const changeLang = (lang: string) => {
	locale.value = lang;
	uni.setStorageSync("lang", lang);
};
</script>

<style lang="scss" scoped>
.page-login {
	position: relative;
	height: 100vh;
	text-align: center;
	padding-top: 281rpx;
	box-sizing: border-box;

	:deep(.cl-banner) {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

		.uni-swiper-dots-horizontal {
			bottom: 451rpx;
		}

		.uni-swiper-dot {
			background: #fff;
			opacity: 1;
			width: 12rpx;
			height: 12rpx;
		}

		.uni-swiper-dot-active {
			width: 42rpx;
			height: 12rpx;
			background: #ffffff;
			border-radius: 6rpx;
		}
	}

	.logo {
		width: 148rpx;
		height: 148rpx;
		position: relative;
	}

	.text {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 40rpx;
		color: #ffffff;
		line-height: 70rpx;
		text-align: center;
		position: absolute;
		bottom: 522rpx;
		width: 100%;
	}

	.register {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 10rpx;
		position: absolute;
		bottom: 304rpx;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
	}

	.login {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #f6f6f6 0%, #ffffff 100%);
		border-radius: 10rpx;
		position: absolute;
		bottom: 186rpx;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #0c81f7;
		line-height: 88rpx;
	}

	.later {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		position: absolute;
		bottom: 114rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
